<template>
	<view class="home">
		<view class="header">
			<uni-easyinput prefixIcon="search" v-model="searchvalue" placeholder="搜索课程" @iconClick="Clicksearch"></uni-easyinput>
		</view>
		<!-- //轮播图 -->
		<view class="banner">
			<uni-swiper-dot class="uni-swiper-dot-box" :current="current" mode="round" field="content" :autoplay="true" :interval="3000" :duration="300">
				<swiper class="swiper-box" @change="change" :autoplay="true" :indicator-dots="true">
					<swiper-item v-for="(item, index) in bannerList" :key="index">
						<view class="swiper-item" :class="'swiper-item' + index">
							<image class="img-swiper" :src="`https://www.aikoolearn.com/video-dev${item.image}`"></image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<!-- 分类 -->
		<view class="category-type">
			<scroll-view :scroll-x="true" class="categorytype-scroll">
				<view v-for="(item, index) in drawList" class="type-item" @click="goCourse(item,index)">
					<image :src="`/static/drawList/${index}.png`" style="width: 40px; height: 50px"></image>
					<view>{{ item.name }}</view>
				</view>
			</scroll-view>
		</view>

		<!-- 、、最近上线 -->
		<view class="md-class-con con-bgi" v-for="(item, index) in tuijianList" :key="index" style="background-color: #fff">
			<view class="md-class-container">
				<h3 class="h3-title">{{ item.alias || item.name }}</h3>
				<ul class="md-class-list-online" v-if="item.vhomeRecommendedDetails">
					<li v-for="(v, i) in item.vhomeRecommendedDetails" :key="i">
						<MdItemClassComponent :classInfo="v" />
					</li>
				</ul>
			</view>
		</view>

		<!-- 酷学直播 -->
		<view class="md-class-con" style="background-color: #fff" v-if="liveList.length">
			<view class="md-class-container">
				<h3 class="h3-title">酷学直播</h3>
				<ul class="md-class-list">
					<li v-for="(v, i) in liveList.slice(0, 4)" :key="i">
						<LiveItemClassComponent :classInfo="v" />
					</li>
				</ul>
			</view>
		</view>

		<!-- //推荐课程-->
		<view class="md-class-con" style="padding: 20px 0" v-if="videoLists.length">
			<view :class="['md-category']">
				<scroll-view :scroll-x="true" class="typelist-scroll">
					<view :class="['type-item', +pIndex === index ? 'type-item-active' : '']" v-for="(item, index) in videoLists" :key="index" @click="handleCategory(index)">
						<p>{{ item.name }}</p>
					</view>
				</scroll-view>
				<ul class="md-class-list" v-if="videoLists[pIndex].vhomeRecommendedDetails">
					<li v-for="(v, i) in videoLists[pIndex].vhomeRecommendedDetails" :key="i">
						<MdItemClassComponent :classInfo="v" />
					</li>
				</ul>
			</view>
		</view>
	</view>
</template>

<script>
import { getBannerList, getCategoryList, selectLiveListisReferral, getTuiJian } from '@/services/home.js';
import LiveItemClassComponent from '@/components/liveItem/index.vue';
import MdItemlineClassComponent from '@/components/mdItemline/index.vue';
import MdItemClassComponent from '@/components/mdItem/index.vue';
export default {
	components: {
		LiveItemClassComponent,
		MdItemlineClassComponent,
		MdItemClassComponent
	},
	data() {
		return {
			searchvalue: '',
			bannerList: [],
			drawList: [], //课程分类列表
			current: 1,
			liveList: [], //酷学直播
			liveparams: {
				pageNum: 1,
				pageSize: 10,
				isReferral: 1
			},
			tuijianList: [], //最近上线
			videoLists: [],
			pIndex: null
		};
	},
	created() {
		this.getBannerLists();
		this.getCategoryList();
		this.selectLiveList();
		this.getTuiJian();
	},
	methods: {
		goCourse(item,index) {
			console.log(item,'item');
			uni.setStorageSync('type', JSON.stringify({ rid: item.rid,pId:item.rid }));
			uni.switchTab({
				url: '/pages/course/index'
			});
		},
		change(e) {
			this.current = e.detail.current;
		},
		handleCategory(index) {
			this.pIndex = index;
		},
		async selectLiveList() {
			const res = await selectLiveListisReferral(this.liveparams);
			if (res.code === 200) {
				this.liveList = res.rows;
			}
		},
		async getBannerLists() {
			const res = await getBannerList({
				type: 1
			});
			if (res.code == 200) {
				this.bannerList = res.data;
			}
		},
		async getCategoryList() {
			const res = await getCategoryList(1);
			if (res.code === 200) {
				this.drawList = res.data;
			}
		},
		async getTuiJian() {
			const res = await getTuiJian();
			if (res.code == 200) {
				this.tuijianList = res.data.filter((item) => item.name == '最近上线');
				this.videoLists = res.data.filter((item) => item.name !== '最近上线');
				this.pIndex = 0;
			}
		},
		Clicksearch() {}
	}
};
</script>
<style lang="scss" scoped>
.header {
	padding-top: 40px;
}

.home {
	padding: 0px 32rpx;
	background-color: #f2f3f7;
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		background-color: transparent;
	}

	::v-deep {
		.uni-easyinput {
			// height: 72rpx;
		}
		.is-input-border {
			border-radius: 40rpx;
		}
		.is-focused {
			border-color: rgb(229, 229, 229) !important;
		}

		.swiper-box {
			margin-top: 24rpx;
			border-radius: 8rpx;
			height: 240px;
			width: 100%;
		}
		.uni-swiper-item {
			height: 240px;
		}
		.uni-scroll-view-content {
			display: flex;
			align-items: center;
		}
	}

	.banner {
		margin-top: 24rpx;
		.img-swiper {
			border-radius: 10rpx;
			width: 100%;
			height: 240px;
		}
	}

	.categorytype-scroll {
		display: flex;
		align-items: center;
		justify-content: space-evenly;
	}

	.category-type {
		.type-item {
			position: relative;
			height: 137px;
			margin-left: 56rpx;
			font-size: 14px;
			display: flex;
			align-items: center;
			justify-content: center;
			> :nth-child(2) {
				width: 100px;
				height: 34rpx;
				position: absolute;
				font-size: 16px;
				bottom: -1px;
				text-align: center;
			}
		}
		> :nth-child(1) {
			margin-left: 0px;
		}
	}
	.md-class-con {
		margin-top: 40px;
		padding: 12px;
		border-radius: 25px;
		.md-class-list {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: flex-start;
			li {
				list-style: none;
			}
		}
		.md-class-list-online{
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: flex-start;
			li {
				list-style: none;
			}
		}
	}
	.con-bgi {
		background-image: url('/static/img/Recently-bg.png');
		background-repeat: no-repeat;
		background-size: 100%;
	}
	.h3-title {
		font-size: 16px;
		line-height: 44rpx;
		margin-bottom: 24rpx;
		padding-left: 20px;
	}
	.type-item {
		color: #1c1f21;
		font-size: 14px;
		line-height: 16px;
		border-radius: 6px;
		text-align: center;
		margin: 0 12px 12px 0;
		cursor: pointer;
		p {
			width: 100px;
			// display: inline-block;
		}
	}
	.type-list {
		height: 114.504rpx;
		line-height: 95.42rpx;
	}
	.type-item-active {
		position: relative;
		color: #0fb09b;
		&::after {
			//主要是这个
			content: '';
			width: 25px;
			height: 5px;
			display: block;
			margin: 0 auto;
			margin-top: 10px;
			background-color: #0fb09b;
			border-radius: 57.252rpx;
			position: absolute;
			left: 49%;
			transform: translate(-50%, -50%);
		}
	}

	.typelist-scroll {
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		height: 95.42rpx;
	}
	
}
@media (max-width: 600px) {  
	    .con-bgi {  
			padding:12px 0 0 0 !important;
	    }  
		.md-class-list-online{
			justify-content: space-evenly !important;
		}
	}
</style>
